<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>约会详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/CSS.css">
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../layui/layui.all.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/JS.js"></script>
</head>
<body style="background: #fff">
<header>
    <a href="javascript:history.back(-1)" class="back"><img src="../img/back.png" height="18px"></a>
    <div class="center title">约会详情</div>
</header>
<form action="">
    <ul class="outing_info clearfix">
        <li class=""><img src="../img/logo.png" alt=""></li>
        <li>
            <p>
                <span><img src="../img/description.png" alt=""></span>
                <span>有人星期天一起去散步吗?</span>
            </p>
            <p>
                <span><img src="../img/location.png" alt=""></span>
                <span>河边</span>
            </p>
            <p>
                <span><img src="../img/time.png" alt=""></span>
                <span>4月30日 下午5点</span>
            </p>
        </li>
    </ul>
    <ul class="clearfix date_img">
        <p>约会地点照片</p>
        <li><img src="../img/logo.png" alt=""></li>
        <li><img src="../img/logo.png" alt=""></li>
        <li><img src="../img/logo.png" alt=""></li>
    </ul>
    <ul class="outing_info2 clearfix">
        <li class="clearfix">
        <span class="fl">
            需要人数:<b>1人</b>
        </span>
            <span class="fr">
            悬赏金:<b>500美金</b>
        </span>
        </li>
        <li>
            <span>诚意金:<b>10美金</b></span>
        </li>
        <li>
            支付方式:
            <span><input type="radio" name="pay" value="" checked>平台担保</span>
            <span><input type="radio" name="pay" value="">线下付款</span>
        </li>
    </ul>
    <div class="outing_enroll"><input type="button" name="" value="报名"></div>
    <div class="confirm_enroll">
        <ul class="confirm_enroll_ul">
            <li>报名 <i class="close"></i></li>
            <li>提示:报名即扣除1美金</li>
            <li class="clearfix">
            <span class="fl">
                账户余额:<b>300美金</b>
            </span>
                <span class="fr"><a href="recharge_usd.html">去充值</a></span>
            </li>
            <li class="confirm_btn"><input type="submit" name="" value="确认报名"></li>
        </ul>
    </div>
</form>
</body>
</html>
<script>
    $.each($('.outing_info2 li:nth-child(3) span'),function () {

        var checked=$(this).find('input[type="radio"]').prop('checked');
        if(checked){
            $(this).css('color','#54cae8');
        }
    });
    $('.outing_info2 li:nth-child(3) span').click(function () {

        $(this).find('input[type="radio"]').prop('checked',true);

        $(this).css('color','#54cae8').siblings().css('color','#666');

    });

    $('.outing_enroll').click(function () {
        $('.confirm_enroll').show();
    });
    $('.close').click(function () {
        $('.confirm_enroll').hide();
    });
</script>
